/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  CCell, Table, TableBody, TableRow, Text, TableHead, TextArea, Button, Input,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {tableSetInp} from "../../../common/tool";

const tailZj=<Text css={{"@media print": {fontSize: '0.75rem'} }}>
  注：本备注栏的内容在检验报告附件的备注栏内体现。
</Text>;
interface Props  extends InternalItemProps{
  titles?: any[];    //可能是Node[]，不一定纯粹string;  可变的多个标题编码的。
  defWitn?: any[];     //默认的见证表
}
export const itemA技术见证=['见证表','大备注'];
/**见证材料 备注 2项的：
 *  约定：children [] 可以嵌入俩个儿子DOM节点，分别代表两个段落插入一个div块;
 * */
export const WitnessErect=
    React.forwardRef((
        { children, show ,alone=true,redId,nestMd,label,titles,defWitn}:Props,  ref
    ) => {
      const defvcbFunc = React.useCallback((par: any) => {
        const { 见证表, }=par||{};
        if(!见证表 || 见证表.length<1)   par.见证表=defWitn;
        return  par;
      }, []);
      const [getInpFilter]=useMeasureInpFilter(null,itemA技术见证,defvcbFunc);
      const {inp, setInp} = useItemInputControl({ ref });
      return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                  nestMd={nestMd} alone={alone} label={label!}>
        <div>
          <Text variant="h5">
            {titles![0] + '、技术资料和工作见证材料'}: <Button onPress={() => {
            setInp({...inp, 见证表: defWitn});
          }}>清空全表至默认</Button>
          </Text>
          {(new Array(6)).fill(null).map((_, w: number) => {
            return <React.Fragment key={w}>
              序号 {w + 1} ：
              <div css={{display: 'flex', flexWrap: 'wrap', justifyContent: 'space-evenly'}}>
                <div css={{display: 'inline-flex', alignItems: 'center', whiteSpace: 'nowrap'}}>
                  名称
                  <Input value={inp?.见证表?.[w]?.ti || ''} size={42} style={{display: 'inline-flex', width: 'unset'}}
                         onChange={e => tableSetInp('见证表', w, inp, setInp, 'ti', e.currentTarget.value || undefined)}/>
                </div>
                <div css={{display: 'inline-flex', alignItems: 'center', whiteSpace: 'nowrap'}}>
                  编号
                  <Input value={inp?.见证表?.[w]?.bh || ''} size={13} style={{display: 'inline-flex', width: 'unset'}}
                         onChange={e => tableSetInp('见证表', w, inp, setInp, 'bh', e.currentTarget.value || undefined)}/>
                </div>
              </div>
            </React.Fragment>;
          })}
        </div>
        <hr/>
        <Text variant="h5">{titles![1]}、备注</Text>
        <TextArea value={inp?.大备注 || ''} rows={4}
                  onChange={e => setInp({...inp, 大备注: e.currentTarget.value || undefined})}/>
        { children ? children : tailZj }
      </InspectRecordLayout>;
});

/*技术资料和工作见证: 没有 代号的 WitnessErectingVw
 可消除尾巴注解文：  <WitnessErectVw orc={orc} rep={rep}  children={<></>} />
* */
export const WitnessErectVw = ({
                                 orc, rep, label = '五、技术资料和工作见证材料', tag = 'Witness', children,
                                 fixed = ["5%", "%", "29%"]
                               }: {
                                 orc: any, rep: any, label?: string, fixed?: string[], tag?: string, children?: any,
                               }
) => {
  return <>
    <Text variant="h4" css={{
      marginTop: '1rem', "@media print": {paddingBottom: '3.5rem', pageBreakInside: 'avoid'}
    }}>{label}</Text>
    <Table id={tag} fixed={fixed} css={{borderCollapse: 'collapse', "@media print": {marginTop: '-3.5rem'}}} tight
           miniw={800}>
      <TableHead>
        <RepLink ori rep={rep} tag={'Witness'}>
          <TableRow>
            <CCell>序号</CCell>
            <CCell>名称</CCell>
            <CCell>编号</CCell>
          </TableRow>
        </RepLink>
      </TableHead>
      <TableBody>
        <RepLink ori rep={rep} tag={'Witness'}>
          {orc?.见证表?.map((o: any, i: number) => {
            if (JSON.stringify(o) === '{}') return null;
            else return (
                <TableRow key={i}>
                  <CCell>{i + 1}</CCell>
                  <CCell>{o?.ti}</CCell>
                  <CCell>{o?.bh}</CCell>
                </TableRow>
            );
          })}
        </RepLink>
      </TableBody>
    </Table>
    { children ? children : tailZj }
  </>;
};
